<template>
<div class="main">
<div class="list-main">
<div class="list-nav">
    <el-menu class="list-menu">
      <el-submenu :index="item.key" v-for="item in leftList" :key="item.key">
        <template slot="title">
          <span>{{ item.key }}</span>
        </template>
        <el-menu-item-group>
          <el-menu-item
            v-for="Item in item.res"
            :index="Item[0]"
            :key="Item[0]"
            @click="changeSelect(item, Item)"
          >
            <p>
              <div class="biaozhumc" :title="Item[1]['biaozhuwzmc']">{{ Item[1]["biaozhuwzmc"] }}</div>
              <span style="margin-right:13px;">{{ Item[1]["count"] }}</span>
            </p>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</div>
<div class="tagging">
    <div class="tagging-h">
      <el-form :inline="true" ref="form" :model="form" label-width="80px">
        <el-form-item>
          <el-input
            class="h35"
            style="width: 400px"
            v-model="form.name"
            placeholder="请输入案件编号"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">
            <i class="el-icon-search bold"></i>
            搜索
          </el-button>
        </el-form-item>
      </el-form>
      <div class="r">
        <el-button class="e-medium" size="medium">
          <i class="fa fa-plus bold" aria-hidden="true"></i>
          新建主题分类
        </el-button>
        <el-button class="e-medium" size="medium">
          <i class="fa fa-sign-in bold" aria-hidden="true"></i>
          导出
        </el-button>
      </div>
    </div>
    <div class="tagging-c">
      <!-- :data="tableData" -->
      <el-table
        ref="table"
        class="box"
        :data="
          tableData.filter(
            data => !form.name || data.anjianbh.includes(form.name)
          )
        "
        header-row-class-name="header"
        style="width: 100%"
      >
        <el-table-column type="index" label="序号" align="center">
        </el-table-column>
        <el-table-column type="expand">
          <template slot-scope="props">
            <div class="bg">
              <div class="title">我的标注</div>
              <el-table
                class="box"
                :data="props.row.children"
                header-row-class-name="header"
                style="width: 100%"
              >
                <el-table-column prop="date" label="标注时间" width="180">
                  <template slot-scope="{ row }">
                    <span v-if="row.status !== 'edit'">{{
                      row.biaozhusj
                    }}</span>
                    <el-date-picker
                      v-else
                      v-model="row.biaozhusj"
                      type="date"
                      placeholder="选择日期"
                    >
                    </el-date-picker>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="biaozhuwzid"
                  label="标注位置"
                  width="180"
                >
                  <template slot-scope="{ row }">
                    <span v-if="row.status !== 'edit'">{{
                      row.biaozhuwzid
                    }}</span>
                    <el-input
                      v-else
                      v-model="row.biaozhuwzid"
                      placeholder="请输入标注位置"
                    />
                  </template>
                </el-table-column>
                <el-table-column prop="xuanqunr" label="选取内容">
                  <template slot-scope="{ row }">
                    <span v-if="row.status !== 'edit'">{{ row.xuanqunr }}</span>
                    <el-input
                      v-else
                      v-model="row.xuanqunr"
                      placeholder="请输入选取内容"
                    />
                  </template>
                </el-table-column>
                <el-table-column prop="biaozhunr" label="我的标注">
                  <template slot-scope="{ row }">
                    <span v-if="row.status !== 'edit'">{{
                      row.biaozhunr
                    }}</span>
                    <el-input
                      v-else
                      v-model="row.biaozhunr"
                      placeholder="请输入标注"
                    />
                  </template>
                </el-table-column>
                <el-table-column prop="biaozhuflid" label="标注分类ID">
                  <template slot-scope="{ row }">
                    <span v-if="row.status !== 'edit'">{{
                      row.biaozhuflid
                    }}</span>
                    <el-input
                      v-else
                      v-model="row.biaozhuflid"
                      placeholder="请输入标注"
                    />
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="right" width="200">
                  <template slot-scope="{ row }">
                    <!-- {{ row.status }} -->
                    <span v-if="row.status === 'edit' || row.status === 'add'">
                      <el-button @click="operateFun('save', row)"
                        ><i class="el-icon-document" />保存</el-button
                      >
                      <el-button @click="operateFun('cancle', row)"
                        ><i class="el-icon-close" />取消</el-button
                      >
                    </span>
                    <span v-else>
                      <el-button type="primary" @click="operateFun('edit', row)"
                        ><i class="el-icon-edit-outline" />编辑</el-button
                      >
                      <el-button
                        style="color: #fff"
                        type="danger"
                        @click="operateFun('delete', row)"
                        ><i class="el-icon-delete" />删除</el-button
                      >
                    </span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="决定号" prop="juedingh"> </el-table-column>
        <el-table-column label="申请号" prop="shenqingh"> </el-table-column>
        <el-table-column label="发明创造名称" prop="famingmc">
        </el-table-column>
        <el-table-column label="标注时间" prop="biaozhusj"> </el-table-column>
        <el-table-column label="案件结论" prop="anjianjl"> </el-table-column>
        <el-table-column label="案件编号" prop="anjianbh"> </el-table-column>
        <el-table-column label="最近标注" prop="biaozhuid"> </el-table-column>

        <el-table-column label="操作" align="right" width="200">
          <template slot-scope="scope">
            <el-button type="danger" @click="deleteBiaozhu(scope.row)"
              ><i class="el-icon-delete bold"></i> 删除</el-button
            >
            <el-button type="text" @click="handleCheck(scope.row)"
              >{{ scope.row.isArrow ? "收起" : "展开" }}标注
              <i
                class="el-icon-d-arrow-right"
                :class="{
                  'arrow-up': scope.row.isArrow,
                  'arrow-dwon': !scope.row.isArrow
                }"
              ></i
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</div>
  
</template>
<script>
import { deepClone } from "../../sample/sample-manage/utils/index";
import {
  lableCases,
  queryCaseLables,
  editSingleLables,
  deleteCaseLables,
  deleteSingleLables
} from "@api/details";

export default {
  data() {
    return {
      form: {
        name: ""
      },
      leftList: [],
      tableData1: [
        // {
        //   date: "2016-05-02",
        //   name: "王小虎",
        //   address: "上海市普陀区金沙江路 1518 弄"
        // },
        // {
        //   date: "2016-05-04",
        //   name: "王小虎",
        //   address: "上海市普陀区金沙江路 1517 弄"
        // },
        // {
        //   date: "2016-05-01",
        //   name: "王小虎",
        //   address: "上海市普陀区金沙江路 1519 弄"
        // },
        // {
        //   date: "2016-05-03",
        //   name: "王小虎",
        //   address: "上海市普陀区金沙江路 1516 弄"
        // }
      ],
      tableData: [
        // {
        //   id: "12987122",
        //   isArrow: false,
        //   name: "好滋好味鸡蛋仔",
        //   category: "好滋好味鸡蛋仔",
        //   desc: "好滋好味鸡蛋仔",
        //   address: "好滋好味鸡蛋仔",
        //   shop: "王小虎夫妻店",
        //   shopId: "10333"
        // },
        // {
        //   id: "12987123",
        //   isArrow: false,
        //   name: "好滋好味鸡蛋仔",
        //   category: "好滋好味鸡蛋仔",
        //   desc: "好滋好味鸡蛋仔",
        //   address: "好滋好味鸡蛋仔",
        //   shop: "王小虎夫妻店",
        //   shopId: "10333"
        // }
      ],
      tagObj: {
        biaozhuflid: "",
        biaozhunr: "",
        biaozhusj: "",
        biaozhuwzid: "",
        xuanqunr: "",
        status: "add"
      },
      //用于展开标记,避免开关都请求后端
      expandedFlag: 0
    };
  },
  mounted() {
    this._lableCases();
    // this._queryCaseLables();
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    deleteBiaozhu(row) {
      // 删除当前项
      const param = {
        anjianbh: row.anjianbh,
        juedingh: row.juedingh
      };
      this._deleteCaseLables(param);
    },
    handleCheck(row) {
      // debugger;
      // row.isArrow = !row.isArrow;
      this.$set(row, "isArrow", !row.isArrow);
      let $table = this.$refs.table;
      if (
        row.isArrow
        // &&
        // this.expandedFlag <= ((row.children && row.children.length) || 0)
      ) {
        $table.toggleRowExpansion(row, true);
        this._queryCaseLables(row, row.anjianbh, row.juedingh);
      } else {
        $table.toggleRowExpansion(row, false);
      }
    },
    /* 获取已审案件data*/
    async _lableCases() {
      const { data } = await lableCases({
        anjianlx: "fushen",
        biaozhunr: "",
        biaozhuwzid: "",
        page: "1",
        size: "10",
        biaozhuflid: ""
      });
      console.log(data);
      // this.tableData = data.docs || [];
      this.tableData = data.docs.map((item, index) => {
        item.isArrow = false;
        // index === 0 && this.activeNames.push(item.委内编号);
        return item;
      });
      this.leftList = Object.entries(data.classInfos).map(item => {
        let [key, res] = item;
        res = Object.entries(res);
        return {
          key,
          res
        };
      });
    },
    /* 获取我的标注data*/
    async _queryCaseLables(result, anjianbh, juedingh) {
      const { data } = await queryCaseLables({
        anjianbh: anjianbh,
        juedingh: juedingh
      });
      console.log(data)
      this.$set(
        result,
        "children",
        data.docs.map((item, index) => {
          item.status = "view";
          return item;
        })
      );
    },
    async _editSingleLables(form) {
      const { data } = await editSingleLables(form);
    },
    async _deleteCaseLables(form) {
      const { data } = await deleteCaseLables(form);
    },
    async _deleteSingleLables(form) {
      const { data } = await deleteSingleLables(form);
    },
    operateFun(type, data) {
      console.log(data);
      // const { biaoyinxid } = data || {};
      if (type === "add") {
        // 是页面跳转还是添加一行数据 ????   尚不清楚两个都加上
        this.tableData1.push(this.tagObj);
      } else if (type === "edit") {
        this.$set(data, "status", "edit");
      } else if (type === "delete") {
        this.$set(data, "status", "delete");
        // 删除当前项
        const param = {
          biaozhuid: data.biaozhuid
        };
        this._deleteSingleLables(param);
        // indexDel(param).then(res => {
        //   console.log(res, "------delete index------");
        //   const deleleINdex = this.tableData1.findIndex(
        //     i => i.biaoyinxid === biaoyinxid
        //   );
        //   this.tableData1.splice(deleleINdex, 1);
        // });
      } else if (type === "save") {
        this.$set(data, "status", "save");

        // 调接口保存修改，成功后更新ui
        const {
          biaozhuflid,
          biaozhunr,
          biaozhuwzid,
          xuanqunr,
          biaozhusj
        } = data;
        // if (biaoyinxid) {
        // 编辑 --> 保存
        const params = {
          biaozhusj,
          biaozhuflid,
          biaozhunr,
          biaozhuwzid,
          xuanqunr
        };
        this._editSingleLables(params);
        // }
        //else {
        // 新建 ---> 保存
        // const params = {
        //   biaoyinxlx,
        //   biaoyinxmc,
        //   biaoyinz
        // };
        // indexAdd(params).then(res => {
        //   if (res.code === 200) {
        //     this.tableData1.find(i => i.biaoyinxlx === biaoyinxlx).status =
        //       "";
        //   }
        // });
        // }
      } else if (type === "cancle") {
        this.$set(data, "status", "cancle");
        // 恢复当前项的数据
        // const deleleINdex = this.tableData1.findIndex(
        //   i => i.biaoyinxid === biaoyinxid
        // );
        // this.tableData1.splice(deleleINdex, 1, this.originData);
      }
    }
  }
};
</script>
<style>
.el-table__expanded-cell {
  background-color: #ebeef5;
}
thead .header th {
  background-color: #f7f7f7;
  color: #303133;
}
</style>
<style lang="scss" scoped>
// 公共
$main-color: #303133;
$blue-color: #2d54b8;
.el-dropdown-menu__item {
  font-size: 14px;
}
.biaozhumc{
  width: 120px;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  box-sizing: border-box;
  padding-left:15px;
}
.list-main{
 float:left;
}
.list-nav {
  width: 264px;
   height:auto;
  border-left: 6px solid $blue-color;
  border-bottom: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 18px;
 
}
.list-menu {
  border-radius: 4px;
  border-right: 1px solid #dcdfe6;
  background-color: #ffffff;
  .el-submenu__title {
    padding: 0 13px 0 15px !important;
    background-color: #ebeef5;
    color: $blue-color;
    font-size: 16px;
  }
  .el-submenu__title i {
    color: $blue-color;
  }
  .el-submenu__icon-arrow {
    font-weight: 700;
  }
  .el-menu-item-group__title {
    padding: 0;
  }
  .el-submenu {
    margin-bottom: 1px;
    &:last-child {
      margin-bottom: 0;
    }
    .el-menu-item {
      height: 46px;
      line-height: 46px;
      padding: 0 !important;
      p {
        margin: 0 0 0 15px;
        border-bottom: 1px solid #e4e7ed;
        padding: 0 13px 0 0;
      }
      &:last-child {
        border-bottom: 0;
      }
      &:focus,
      &:hover {
        p {
          border-bottom: 1px solid #ecf5ff;
        }
      }
      span {
        float: right;
        background-color: $blue-color;
        height: 24px;
        line-height: 24px;
        padding: 0 4px;
        color: #ffffff;
        border-radius: 4px;
        margin-top: 11px;
      }
    }
  }
}
.list-menu {
  .list-menu-more {
    margin: 0 10px 10px 10px;
    .el-button {
      width: 100%;
      border: 0;
      background: #ebeef5;
      border-radius: 10px;
      color: $blue-color;
    }
    .el-button--primary.is-plain:focus,
    .el-button--primary.is-plain:hover {
      color: #ffffff;
      background-color: $blue-color;
      i {
        color: #ffffff;
      }
    }
    i {
      color: $blue-color;
      -webkit-transform: rotate(-90deg);
      transform: rotate(-90deg);
      font-size: 12px;
      margin: -2px 0 0 6px;
      font-weight: 700;
    }
  }
}
.tagging {
  float:left;
  margin-left:35px;
  border: solid 1px #dcdfe6;
  padding: 20px;
  border-radius: 4px;
  background-color: #fff;
}
.tagging-c {
  // width: 890px;
}
::v-deep .el-form-item {
  margin-bottom: 20px;
}
::v-deep .el-table__expand-icon > .el-icon {
  display: none;
}
::v-deep .el-table td {
  padding: 6px 0;
}
::v-deep .el-table__expanded-cell[class*="cell"] {
  padding: 8px 10px 31px;
}

.tagging-h {
  display: flex;
  justify-content: space-between;
}
.bg .title {
  color: #333;
  font-size: 14px;
  font-weight: bold;
  line-height: 38px;
  position: relative;
  padding-left: 14px;
  &:after {
    content: "";
    width: 4px;
    height: 13px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background-color: #3057b5;
  }
}
.box {
  border: solid 1px #dcdfe8;
  border-bottom: 0;
}
::v-deep .el-table th.is-leaf,
::v-deep .el-table td {
  border-bottom: 1px solid #dcdfe8;
}
::v-deep .el-table::before,
::v-deep .el-table--group::after,
::v-deep .el-table--border::after {
  background-color: #dcdfe8;
}
</style>
